<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>注册页面</title>
  <link rel="stylesheet" href="./index.css">
  <script src="https://unpkg.com/vue@next"></script>
</head>
<style>
  .td-tip span {
    font-size: 12px;
    color: red;
  }

  .fontcolor {
    color: black;
  }
</style>
<!-- 199010119曾讯 -->
<body>
  <div class="nav">
    <div class="logo">
      <img src="./images/index_03.png" alt="">
    </div>
    <div class="info">
      <img src="./images/index_06.png" alt="">
    </div>
  </div>
  <div class="container-re">
    <h3>新用户注册<span>已有账号，点击登录</span></h3>
    <div class="register">
      <form action="" class="register-table">
        <table>
          <tr>
            <td class="td-info"><label for="nickname">用户昵称：</label></td>
            <td class="td-inp"><input type="text" id="nickname"></td>
          </tr>
          <tr>
            <td class="td-info"><label for="username">用户姓名：</label></td>
            <td class="td-inp"><input type="text" id="username" v-model="username" @blur="checkname"></td>
            <td class="td-tip"><span>{{nametip}}</span></td>
          </tr>
          <tr>
            <td class="td-info"><label for="password">密码：</label></td>
            <td class="td-inp"><input type="password" id="password" v-model="password" @blur="checkpass"></td>
            <td class="td-tip"><span>{{passtip}}</span></td>
          </tr>
          <tr>
            <td class="td-info"><label for="password-ye">确认密码：</label></td>
            <td class="td-inp"> <input type="password" id="password-ye" v-model="passwordYe" @blur="checkagainpass"></td>
            <td class="td-tip"><span>{{againpass}}</span></td>
          </tr>
          <tr>
            <td class="td-info"><label for="sex">性别：</label></td>
            <td class="td-inp">
              <input type="radio" id="sex" name="sex" value="male">男
              <input type="radio" id="sex" name="sex" value="famale">女
            </td>
          </tr>
          <tr>
            <td class="td-info"><label for="phone">手机号：</label></td>
            <td class="td-inp"><input type="text" id="phone" v-model="phone" @blur="checkphone"></td>
            <td class="td-tip"><span>{{phonetip}}</span></td>
          </tr>
          <tr>
            <td class="td-info"><label for="address">地址：</label></td>
            <td class="td-inp">
              <input type="text" id="address" list="addresslist">
              <datalist id="addresslist">
                <option value="北京"></option>
                <option value="重庆"></option>
                <option value="上海"></option>
                <option value="杭州"></option>
                <option value="成都"></option>
              </datalist>
              <!-- <select name="" id="provice"></select>市
              <select name="" id="city"></select>区/县 -->
            </td>
          </tr>
          <tr>
            <td class="td-info"><label for="birthday">出生日期：</label></td>
            <td class="td-inp"><input type="date" id="birthday"></td>
          </tr>
          <tr>
            <td class="td-info"><label for="IDnumber">身份证号：</label></td>
            <td class="td-inp"><input type="text" id="IDnumber" v-model="IDnumber" @blur="checkID"></td>
            <td class="td-tip"><span>{{IDtip}}</span></td>

          </tr>
          <tr>
            <td colspan="2" align="center"><input type="submit" id="btn-sub" value="注册"></td>
          </tr>
        </table>
      </form>
      <div class="advertisement">
        <h3>旅游之前，先上疯游精</h3>
        <img src="./images/index_50.png" alt="">
        <span>拎包就走，轻松出游！</span><br>
        <button>查看更多</button>
      </div>
    </div>
  </div>
  <script>
    Vue.createApp({
      data() {
        return {
          username: "",
          password: "",
          passwordYe: "",
          phone: "",
          IDnumber: "",
          // 显示提示信息
          nametip: "",
          passtip: "",
          againpass: "",
          phonetip: "",
          IDtip: "",
        }
      },
      methods: {
        // 验证姓名
        checkname() {
          if (this.username == "") {
            this.nametip = "这个必填哟！"
          } else {
            this.nametip = ""
          }
        },
        // 验证密码
        checkpass() {
          if (!/\w{6,20}/.test(this.password)) {
            this.passtip = "密码不合格！"
          } else if (this.passwordYe !== this.password) {
            this.againpass = "密码不一致"
            this.passtip = ""
          } else {
            this.againpass = ""
          }
        },
        // 再次验证密码
        checkagainpass() {
          if (this.passwordYe !== this.password) {
            this.againpass = "密码不一致"
          } else {
            this.againpass = ""
          }
        },
        // 验证手机号
        checkphone() {
          if (!/^1[34578]\d{9}/.test(this.phone)) {
            this.phonetip = "号码格式错误"
          } else {
            this.phonetip = ""
          }
        },
        // 身份证验证
        checkID() {
          if (!/^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/.test(this.IDnumber)) {
            this.IDtip = "号码格式错误"
          } else {
            this.IDtip = ""
          }
        }
      },

    }).mount(".register")
  </script>
</body>

</html>